<template>
   <view class="uv-page">
      <uv-gap height="30" bgColor="#fff"></uv-gap>
      <uv-cell-group>
         <uv-cell
            :titleStyle="{ fontWeight: 500 }"
            @click="openNotify(item.notifyData)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
      <uv-notify ref="notify" />
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const notify = ref();

const list = ref([
   {
      notifyData: {
         message: 'notify顶部提示',
         type: 'primary',
         color: '#ffffff',
         bgColor: '',
         fontSize: 15,
         duration: 3000,
      },
      title: '主要通知',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/main.png',
   },
   {
      notifyData: {
         message: 'notify顶部提示',
         type: 'success',
         color: '#ffffff',
         bgColor: '',
         fontSize: 15,
         duration: 3000,
         safeAreaInsetTop: false,
      },
      title: '成功通知',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/success.png',
   },
   {
      notifyData: {
         message: 'notify顶部提示',
         type: 'error',
         color: '#ffffff',
         bgColor: '',
         fontSize: 14,
         duration: 3000,
         safeAreaInsetTop: false,
      },
      title: '危险通知',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/error.png',
   },
   {
      notifyData: {
         message: 'notify顶部提示',
         type: 'warning',
         color: '#ffffff',
         bgColor: '',
         fontSize: 15,
         duration: 3000,
         safeAreaInsetTop: false,
      },
      title: '警告通知',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/warning.png',
   },
   {
      notifyData: {
         message: 'notify顶部提示',
         color: '#fff',
         bgColor: '#000',
         fontSize: 15,
         duration: 3000,
         safeAreaInsetTop: false,
      },
      title: '自定义样式',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/customStyle.png',
   },
   {
      notifyData: {
         message: 'notify顶部提示',
         type: 'primary',
         color: '#ffffff',
         bgColor: '',
         fontSize: 15,
         duration: 6000,
         safeAreaInsetTop: false,
      },
      title: '自定义时间',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/customTime.png',
   },
   {
      notifyData: {
         message: 'notify顶部提示',
         color: '#fff',
         bgColor: '',
         fontSize: 15,
         duration: 3000,
         safeAreaInsetTop: true,
      },
      title: '插入状态栏高度',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/notify/height.png',
   },
]);

// 方法
const openNotify = (params: any) => {
   notify.value.show({ ...params });
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}
</style>
